<template>
  <el-col class="childBox">
    <el-row>
      <el-alert :title="configParams['label']" type="info" :closable="false"/>
      <div class="tabBox">
        <el-form
          :inline="true"
          class="queryForm"
          ref="queryForm"
          v-show="showSearch"
        >
          <FormItem
            v-for="(item, index) in fieldInfo"
            :itemInfo="item"
            :index="index"
            :key="index"
            itemType="query"
            @ItemValChange="ItemValChange"
          ></FormItem>
        </el-form>

        <el-row :gutter="10" class="mb8" v-if="configParams['proc_VisitTarget']!='Finished'">
          <el-col :span="1.5">
            <el-button
              v-if="isEnabledProc == '1'"
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="handleProcAdd"
            >发起流程
            </el-button
            >
            <el-button
              v-else
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-if="configParams['allowAdd']"
            >新增
            </el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="success"
              icon="el-icon-edit"
              size="mini"
              :disabled="single"
              @click="handleUpdate"
              v-if="configParams['allowUpdate']"
            >修改
            </el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
              v-if="configParams['allowDelete']"
            >删除
            </el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="info"
              icon="el-icon-upload2"
              size="mini"
              @click="handleImport"
              v-if="configParams['allowImport']"
            >导入
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="warning"
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              v-if="configParams['allowExport']"
            >导出
            </el-button
            >
          </el-col>
          <!--右侧查询按钮-->
          <right-toolbar
            :showSearch.sync="showSearch"
            stype="V1"
            @handleQuery="handleQuery"
            @resetQuery="resetQuery"
            @queryTable="getList"
          ></right-toolbar>
        </el-row>
        <el-table
          v-loading="loading"
          :max-height="configParams['tableHeight']"
          border
          :data="tableData"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            show-overflow-tooltip
            type="selection"
            width="55"
            align="center"
          />
          <!--遍历需要显示的字段-->
          <el-table-column
            show-overflow-tooltip
            v-for="(item, index) in listShowColumnFilter"
            :key="index"
            :label="item.columnComment"
            :min-width="item.columnWidth"
            :align="item.columnAlign"
            :prop="item.columnName"
          >
            <template slot-scope="scope">
              <span>{{ translatorFormatter(scope.row, item) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="操作"
            align="center"
            fixed="right"
            class-name="small-padding fixed-width"
            width="160"
          >
            <template slot-scope="scope">
              <el-button
                v-if="scope.row['bpmCurrentNode']"
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="showProcProgress(scope.row)"
              >进度
              </el-button>
              <el-button
                v-if="isEnabledProc == '1'"
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleProcUpdate(scope.row)"
              >{{ configParams['allowUpdate'] == true ? '修改' : '详情' }}
              </el-button>
              <el-button
                v-else
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
              >{{ configParams['allowUpdate'] == true ? '修改' : '详情' }}
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-if="configParams['allowDelete'] && configParams['proc_VisitTarget']!='Finished'"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="configParams['showPagination'] && table.total>0"
          :total="table.total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />

        <!-- 添加或修改物料出库任务对话框 -->
        <el-dialog
          :title="title"
          :visible.sync="open"
          class="addendum-dialog"
          :fullscreen="true"
          @close="cancel"
          :close-on-click-modal="false"
          :destroy-on-close="true"
          append-to-body
        >
          <Edit
            v-if="open"
            :fieldInfo="fieldInfo"
            :id="updateId"
            :prefixUrl="prefixUrl"
            :formBuildKey="formBuildKey"
            :configParams="configParams"
            @cancel="cancel"
          ></Edit>
        </el-dialog>

        <!-- 优树搭业务流程进度 -->
        <el-dialog
          :title="mksFlowConfig.title"
          :visible.sync="mksFlowConfig.isOpen"
          class="addendum-dialog"
          append-to-body
        >
          <div
            style="
          width: 100%;
          min-height: 350px;
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center;
        "
          >
            <MksFlowWorkProgress
              v-if="mksFlowConfig.isOpen"
              :task-uuid="mksFlowConfig.taskUuid"
            />
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="mksFlowConfig.isOpen = false">取 消</el-button>
          </div>
        </el-dialog>

        <!--发起流程对话框-->
        <flowable-deal-dialog
          :dialog-visible="procOpen"
          :fieldInfo="fieldInfo"
          :form-build-key="formBuildKey"
          :flow-handle-params="ProcParams"
          @closed="procOpen = false"
          @cancel="cancel"
        ></flowable-deal-dialog>

        <!-- Excel导入对话框 -->
        <el-dialog
          :title="upload.title"
          :visible.sync="upload.open"
          width="600px"
          append-to-body
        >
          <div style="width: 100%; text-align: center">
            <el-upload
              ref="upload"
              :limit="1"
              accept=".xlsx, .xls"
              :headers="upload.headers"
              :action="upload.url + '?updateSupport=' + upload.updateSupport"
              :disabled="upload.isUploading"
              :on-progress="handleFileUploadProgress"
              :on-success="handleFileSuccess"
              :auto-upload="false"
              drag
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或
                <em>点击上传</em>
              </div>
              <div class="el-upload__tip" style="color: red" slot="tip">
                提示：仅允许导入“xls”或“xlsx”格式文件！
                <el-link type="info" style="font-size: 12px" @click="importTemplate"
                >下载模板
                </el-link
                >
              </div>
            </el-upload>
          </div>
          <div
            slot="footer"
            class="dialog-footer"
            style="display: flex; flex-direction: row; justify-content: center"
          >
            <el-button type="primary" @click="submitFileForm">确 定</el-button>
            <el-button @click="upload.open = false">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </el-row>
  </el-col>

</template>

子表需要重写，以生成出来的内容为主进行调整

<script>
import { TableMixins } from '@/views/youshuda/mixins/TableMixins'
import { init, list } from '@/views/youshuda/api/BaseApi'

export default {
  name: 'MyTableComponent',
  mixins: [TableMixins],
  props: {
    configParams: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      //表格加载
      loading: false,
      //提交URL前缀
      prefixUrl: '',
      //表单设计Key
      formBuildKey: '',
      //组件描述
      componentDesc: '物料出库任务',
      //导入参数
      upload: {
        // 上传的地址
        url:
          process.env.VUE_APP_BASE_API + this.prefixUrl + '/importData'
      }
    }
  },
  created() {
    console.log('-------111111111111111--------------------------------')
    console.log(this.configParams)
    if (this.configParams != null && this.configParams != undefined &&
      this.strIsNotEmpty(this.configParams['prefixUrl']) && this.configParams['loadMode'] != 'design') {
      //提交URL前缀
      this.prefixUrl = this.configParams['prefixUrl'].trim()
      this.formBuildKey = this.configParams['buildKey'].trim()
      this.componentDesc = this.configParams['label'].trim()
      //初始化字段信息
      this.initField()
    }
  },
  methods: {
    /** 初始化字段信息 **/
    initField() {
      if(!this.strIsNotEmpty(this.prefixUrl)){
        return;
      }
      init(this.prefixUrl).then(res => {
        if (res.code == 200) {
          let fieldInfo = res.data
          this.fieldInfo = fieldInfo
          fieldInfo.forEach(item => {
            //查询参数
            this.queryParams[item.columnName] = null
          })
        } else {
          this.msgError(res.msg)
        }
      }).then(res => {
        /** 获取列表数据 **/
        if (this.configParams['loadMode'] != 'design' && this.strIsNotEmpty(this.configParams['foreignKey'])) {
          this.getList()
        }
      })
    },
    /** 查询附件列表 */
    getList() {
      if (!this.strIsNotEmpty(this.configParams['$RecodeId'])) {
        return;
      }
      this.loading = true
      //主表记录ID
      this.queryParams[this.toCamelCase(this.configParams['foreignKey'])] = this.configParams['$RecodeId'];
      //清空当前数据
      this.tableData = []
      list(this.prefixUrl, this.queryParams, this.configParams['Req-Type']).then(response => {
        this.tableData = response.rows
        this.table.total = response.total
        this.loading = false
      })
    },
  }
}
</script>
<style scoped>
.childBox {
  box-shadow: 0 2px 10px 0 rgb(0 0 0 / 30%);
  margin-bottom: 10px;
  border-radius: 6px;
  padding: 0px !important;
  margin-top: 15px
}

.tabBox {
  padding: 10px 20px 20px
}

.el-alert {
  margin: 0 0 15px;
  background-color: #10569f !important;
  color: white !important;
}


</style>
